<template>
	<view>
		<u-navbar height="50" :is-back=false title="" :background="{background: 'transparent'}" :border-bottom="false"
			title-color="#fff" title-size="36">
			<!--#ifdef MP -->
			<search-slot>
				<view style="padding: 0 20rpx; font-size: 36rpx; font-family: Source Han Sans CN; color: #fff;">我的
				</view>
			</search-slot>
			<!--#endif-->
		</u-navbar>
		<view class="headerView">
			<view class="headerBg"></view>
			<view class="userInfo">
				<view class="headImageView" v-if="(typeof userInfo) != 'string' ">
					<view class="left" style="display: flex;">
						<u-avatar :src="userInfo.avatar_format" mode="circle" size="120"
							@click="onPreview(userInfo.avatar_format)"></u-avatar>
						<view class="userNameView">
							<view class="userPhone">{{userInfo.nickname}}
								<!-- <span class="vipIcon" v-if="userInfo.level_id==1"></span> -->
								<!-- <span class="ktVip" v-if="userInfo.level_id==0" @click="goVip">开通会员</span> -->
							</view>
						<!-- 	<view class="userID">{{userInfo.is_store == 1 ?'商家':'普通用户'}}</view>
							<view class="userID" v-if="userInfo.level_id == 1" @click="goVip">会员</view>
							<view class="userID" v-if="userInfo.is_store===1">商家</view>
							<view class="userID" v-else>普通用户</view> -->

						</view>
					</view>
					<view class="setting" @click="goPage('/pages/settings/settings')">

					</view>
				</view>
				<view class="headImageView" v-if="(typeof userInfo) == 'string'" @click="onLogin()">
					<u-avatar mode="circle" size="120"></u-avatar>
					<view class="loginBtn">立即登录</view>
				</view>
			</view>
			<view class="myAccount mg20-0">
				<view class="tabTitle">我的账户</view>
				<view class="toolTabView2">
					<view class="profitTab" v-for="(item,index) in toolTab2" :key="index" @click="onPagePath(item)">
						<view v-if="item.subIndex == 1"><text>{{item.num}}</text></view>
						<view v-if="item.subIndex == 2"><text>{{item.num}}</text></view>
						<view v-if="item.subIndex == 3"><text>{{item.num}}</text>张</view>
						<view class="toolTitle">{{item.title}}</view>
					</view>
				</view>
			</view>

		</view>
		<view class="bodyView">
			<!-- <view class="tabs">
				<view class="tabTitle" @click="onStoreOrderList(-1)">
					<text>到店订单</text>
					<view class="otherView">查看全部订单 <u-icon size="11" name="/static/next.png"></u-icon></view>
				</view>
				<view class="rowCenterView P30-0">
					<view class="centerColumnView" v-for="(item,index) in OnStoreListOrder" :key="index"
						style="flex: 1;" @click="onStoreOrderList(index)">
						<u-icon size="48" :name="item.icon"></u-icon>
						<view class="tabText">{{item.name}}</view>
						<u-badge type="error" :offset="[0,20]" :count="item.count"></u-badge>
					</view>
				</view>
			</view> -->
			<!-- 配送订单 -->
			<view class="tabs">
				<view class="tabTitle" @click="onOrderList(-1)">
					<text>配送订单</text>
					<view class="otherView">查看全部订单 <u-icon size="11" name="/static/next.png"></u-icon></view>
				</view>
				<view class="rowCenterView P30-0">
					<view class="centerColumnView" v-for="(item,index) in toolOrder" :key="index" style="flex: 1;"
						@click="onOrderList(index)">
						<u-icon size="48" :name="item.icon"></u-icon>
						<view class="tabText">{{item.name}}</view>
						<u-badge type="error" :offset="[0,20]" :count="item.count"></u-badge>
					</view>
				</view>
			</view>
			<view class="equity mg20-0">
				<view class="tabTitle">用户权益</view>
				<view class="equityView">
					<!-- 					<view class="equityItem" >
						<image class="helpIcon" :src="" mode="aspectFit"></image>
						<view class="toolTitle"></view>
					</view> -->
					<u-grid :col="4" :border="false">
						<u-grid-item v-for="(item,index) in toolTab" :key="index" @click="onPagePath(item)">
							<u-icon :name="item.icon" :size="70"></u-icon>
							<view class="grid-text">{{item.title}}</view>
						</u-grid-item>
						<!-- 						<u-grid-item>
							<u-icon name="/static/icon/kfrx@2x.png" :size="70"></u-icon>
							<view class="grid-text">联系客服</view>
						</u-grid-item> -->
						<view class="kfbtn">
							<button plain open-type="contact">
								<u-icon class="icon" name="/static/icon/kfrx@2x.png" :size="70"></u-icon>
								<view class="btndesc">联系客服</view>
							</button>
						</view>
					</u-grid>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo,
		getAccountInfo,
		getorderstat
	} from '../../api/user.js'
	export default {
		data() {
			return {
				customBar: 0,
				userInfo: '',
				// 配送订单
				toolOrder: [],
				toolTab: [{
					icon: '/static/tab/wdpt.png',
					title: '我的拼团',
					path: '/page/my-group/my-group',
					id: 1
				}, {
					icon: '/static/tab/dzgl.png',
					title: '地址管理',
					path: '/other/delivery-address/delivery-address',
					id: 4
				}, {
					icon: '/static/tab/jfsc.png',
					title: '积分商城',
					path: '/page/pointShop/pointShop',
					id: 5
				}, {
					icon: '/static/tab/wddh.png',
					title: '我的兑换',
					path: '/page/Myredemptions/Myredemptions',
					id: 6
				}, {
					icon: '/static/tab/yqxr.png',
					title: '分享好友',
					path: '/other/invitation/invitation',
					id: 7
				}],
				toolTab2: [
					{
					title: '我的余额',
					path: '/other/wallet/wallet',
					subIndex: 1,
					num: 0
				},
				{
					title: '我的团队',
					path: '/page/uteam/uteam',
					subIndex: 2,
					num: 0
				}, {
					title: '积分',
					path: '/page/extend_earnings/extend_earnings',
					subIndex: 2,
					num: 0
				}, {
					title: '优惠券',
					path: '/page/ucoupon/ucoupon',
					subIndex: 3,
					num: 0
				}],
				OnStoreListOrder: [{
						count: 1,
						icon: '/static/icons/dfk.png',
						name: "待付款",
						status: 0
					},
					{
						count: 2,
						icon: '/static/icons/dsh.png',
						name: "配送中",
						status: 1
					},
					{
						count: 3,
						icon: '/static/icons/dsh.png',
						name: "待收货",
						status: 2
					},
					{
						count: 4,
						icon: '/static/icons/ywc.png',
						name: "已完成",
						status: 3
					}
				]
			}
		},
		onLoad() {
			let self = this
			uni.getSystemInfo({
				success: (e) => {
					// #ifdef MP-WEIXIN
					const custom = wx.getMenuButtonBoundingClientRect()
					self.customBar = custom.top + e.statusBarHeight + 40;
					// #endif
				}
			});
		},
		onShow() {

			this.onUserInfo();
		},
		computed: {},
		methods: {
			onSetting() {
				uni.navigateTo({
					url: '/pages/settings/settings'
				})
			},
			onGetorderstat() {
				let that = this
				getorderstat().then(res => {
					let list = res.data
					list.map(item => {
						switch (item.name) {
							case '待付款':
								item.icon = '/static/icons/dfk.png'
								break;
							case '配送中':
								item.icon = '/static/icons/dps.png'
								break;
							case '待收货':
								item.icon = '/static/icons/dsh.png'
								break;
							case '已完成':
								item.icon = '/static/icons/ywc.png'
								break;
							default:
								break;
						}
					})
					console.log("list", list);
					that.toolOrder = list
					// 	console.log(666,list);
				})
			},
			onUserInfo() {
				let self = this
				this.userInfo = {}
				getUserInfo().then(res => {
					self.userInfo = res.data;
					console.log("用户信息", res.data);
					self.toolTab2[0].num = res.data.balance;
					uni.setStorageSync("vipId", self.userInfo.id)
					if (res.data.is_store === 0) {
						if (this.toolTab[1].id == 2) return
						this.toolTab.splice(1, 0, {
							icon: '/static/icon/sjrz@2x.png',
							title: '商家入驻',
							path: '/page/pointStore/index',
							id: 2
						})
					} else {
						if (this.toolTab[1].id == 2) return
						this.toolTab.splice(1, 0, {
							icon: '/static/icon/sjzx@2x.png',
							title: '商家中心',
							path: '/page/MerchantCenter/MerchantCenter',
							id: 2
						})
					}
					self.onAccountInfo();
					self.onGetorderstat()
				}).catch()
			},
			onAccountInfo() {
				let that = this;
				getAccountInfo().then(res => {
					console.log("账户数据", res);
					that.toolTab2[1].num = res.data.team;
					that.toolTab2[2].num = res.data.points;
					that.toolTab2[3].num = res.data.coupons;
				})
			},
			onLogin() {
				// #ifdef APP-PLUS || H5
				uni.navigateTo({
					url: '/pages/login/login'
				})
				// #endif
				// #ifdef MP-WEIXIN
				uni.navigateTo({
					url: '/pages/wx-login/wx-login'
				})
				// #endif
			},
			onOrderComment() {
				uni.navigateTo({
					url: '/other/order-comment-list/order-comment-list'
				})
			},
			// 配送订单
			onOrderList(index) {
				// console.log(99,index);
				uni.navigateTo({
					url: '/pages/order-list/order-list?index=' + index
				})
			},
			// 到店订单
			onStoreOrderList(index) {
				// console.log(99,index);
				uni.navigateTo({
					url: '/pages/storeOrderList/storeOrderList?index=' + index
				})
			},
			onPreview(path) {
				uni.previewImage({
					current: 0,
					urls: [path]
				});
			},
			onCopy(code) {
				uni.setClipboardData({
					data: code,
					success() {}
				});
			},
			onPagePath(item) {
				uni.navigateTo({
					url: item.path
				})
			},
			goPage(url) {
				uni.navigateTo({
					url
				})
			},
			goVip() {
				uni.navigateTo({
					url: '/other/VipCenter/VipCenter'
				})
			}
		}
	}
</script>

<style>
	@import url('ucenter.css');

	page {
		height: 100%;
		/* background-color: #F4F5F6; */
	}
</style>

<style scoped lang="scss">
	.kfbtn {
		>button {
			display: inline-block;
			border: none;
		}

		.icon {
			margin-top: 26upx;
		}

		.btndesc {
			font-size: 26upx;
			line-height: 26upx;
		}
	}
</style>